//#########################################################
// 版权所有：中国农业银行软件开发中心
// 系统名称：移动办公应用-手机版
// 文件名称：SearchModal.js
// 创建时间：2016年12月06日
// 创建人员：朱勇
// 功能说明：搜索框公共组件
//#########################################################
import React, {Component} from 'react';

import {
    View,
    Text,
    StyleSheet,
    Modal,
    TouchableOpacity,
    Dimensions,
    ScrollView,
    TextInput,
    Keyboard,
    ActivityIndicator,
    BackAndroid,
    Platform
} from 'react-native'
import PubSub from 'pubsub-js';
import reactMixin from 'react-mixin';
import TimerMixin from 'react-timer-mixin';
import {
    PubSubTopics,
    UIConstants,
    Colors
} from '../../common'

const WINDOW_HEIGHT=Dimensions.get('window').height;
const WINDOW_WIDTH=Dimensions.get('window').width;
class SearchModal extends Component {
    constructor(props){
        super(props);
        this.state={
            isOpen:false,
            searching:false
        }
        this.resultList=[];
        this.changeTextTimer = null;
        this.onBackAndroid=this.onBackAndroid.bind(this);
    }
    
    componentDidMount() {
        this.onChangeText = this.onChangeTextFunc.bind(this);
    }
    componentWillUnmount() {
        PubSub.unsubscribe(this.onToggleModalEvent);
    }

    onBackAndroid(){
        this.setState({
            isOpen:false
        })
    }
    componentWillReceiveProps(nextProps) {
        this.resultList=[];
        this.resultList=nextProps.resultList;
        this.setState({
            searching:false
        })
    }
    
    onChangeTextFunc(text) {
        if (this.changeTextTimer !== null) {
            this.clearTimeout(this.changeTextTimer);
        }

        let searchKey = text;
        searchKey = searchKey.trim();

        if(searchKey&&searchKey.length&&searchKey.length>=2){
            this.changeTextTimer = this.setTimeout(() => {
                this.props.onSearch&&this.props.onSearch(searchKey);
                this.setState({
                    searching:true
                })
            },1000)
        }
        
        if(searchKey===''){
            this.resultList=[];
            this.setState({})
        }
    }
    
    open(){
        this.setState({
            isOpen:true
        });
        this.resultList=[];
        this.setState({})
    }
    cancel(){
        this.setState({
            isOpen:false
        })
        this.resultList=[];
        this.setState({})
    }
    render() {
        return (
            <Modal visible={this.state.isOpen} 
                transparent={true} 
                animationType={"slide"} 
                backdropPressToClose={true}
                onRequestClose={this.onBackAndroid}
            >
                <View style={styles.container}>
                    <View style={styles.header}>
                        <View style={styles.textinputview}>
                            <TextInput 
                                ref={(ref) => {this.textInput = ref}}
                                placeholder={UIConstants.contacts.search.keyword}
                                returnKeyType={'search'}
                                underlineColorAndroid={'transparent'}
                                onChangeText={this.onChangeText}
                                autoFocus={true}
                            />
                        </View>
                        <TouchableOpacity onPress={this.cancel.bind(this)}>
                            <Text style={styles.cancelText}>取消</Text>
                        </TouchableOpacity>
                    </View>
                    {
                        this.state.searching?
                        <ActivityIndicator animating={this.state.searching} style={styles.indicator} size={'large'} color={Colors.blueGreen} />
                        :
                        <ScrollView keyboardShouldPersistTaps={true} style={{backgroundColor:this.resultList.length>0?'white':'rgba(0,0,0,0.4)'}}>
                            {
                                this.resultList
                            }
                        </ScrollView>
                    }
                </View>
            
            </Modal>
        );
    }
}

reactMixin(SearchModal.prototype, TimerMixin);

const styles=StyleSheet.create({
    container:{
        backgroundColor:'rgba(0,0,0,0.4)',
        flex:1
    },
    header:{
        height:50,
        backgroundColor:'white',
        flexDirection:'row',
        justifyContent:'flex-start',
        alignItems:'center',
        borderBottomWidth:0.5,
        borderBottomColor:'gray',
        paddingRight:10
    },
    textinputview: {
        flex:1,
        borderWidth: 0.5,
        borderColor: 'gray',
        borderRadius: 5,
        marginRight: 10,
        paddingTop:-5,
        paddingBottom:-5,
        height:40,
        backgroundColor:'white',
        marginLeft:10
    },
    cancelText:{
        color:Colors.black
    },
    indicator:{
        flex:1,
        height: 120,
        alignItems: 'center',
        justifyContent: 'center',
    },
})
export default SearchModal;